/**********************************/
/********** General CSS ***********/
/**********************************/
body {
    color: #fcf6bd;
    background: #fcf6bd;
    font-family: 'Open Sans', sans-serif;
}
.body::before {
    content: '';
    width: 100%;
    height: 100%;
    border: 3px solid rgb(129, 139, 156);
    background-color: #92a9c275;
    filter: blur(1.5rem);
      position: fixed;
    top: 0;
    left: 0;
    z-index: 9999; /* قيمة عالية لضمان الظهور فوق جميع العناصر */
    pointer-events: none; /* للسماح بتفاعل المستخدم مع العناصر التي تحتها */
  }



a {
    color: #222222;
    transition: all .3s;
}

a:hover,
a:active,
a:focus {
    color: #f8f2c1;
    outline: none;
    text-decoration: none;
}

.btn:focus {
    box-shadow: none;
}


/**********************************/
/****** Layout with Sidebar *******/
/**********************************/
.wrapper {
    position: relative;
    margin: 0 auto;
    width: 90%;
    max-width: 1000px;
    border-radius: 1.1rem;
    margin-top: 40px;
    
}

.wrapper .sidebar {
    z-index: 999;
    position: relative;
    width: 100%;
    float: left;
    background-color: #22577a;
}

.wrapper .content {
    position: relative;
    width: 100%;
    padding: 15px;
    float: left;
    background: #fcf6bd;
}

.wrapper .sidebar-header,
.wrapper .sidebar-footer {
    display: none;
}

.navbar {
    padding: 15px;
    background: #22577a !important;
}

.navbar-expand-md .navbar-nav .nav-item {
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, .2);
}

.navbar-expand-md .navbar-nav .nav-item:first-child{
    border-top: none;
}

.navbar-expand-md .navbar-nav .nav-link {
    color: #ffffff;
    padding: 5px 15px 7px 15px;
    transition: all .3s;
}

.navbar-expand-md .navbar-nav .nav-link i {
    color: #ffffff;
    float: right;
    padding-top: 5px;
    transition: all .3s;
}

.navbar-expand-md .navbar-nav .nav-link:hover,
.navbar-expand-md .navbar-nav .nav-link.active {
    color: #0682b3;
    box-shadow: 0 0 20px #07baeb  ;
    
}

.navbar-expand-md .navbar-nav .nav-link:hover i,
.navbar-expand-md .navbar-nav .nav-link.active i{
    color: #0682b3;

}


.wrapper .sidebar,
.wrapper .content {
    -webkit-transition: margin 200ms ease-out;
    -moz-transition: margin 200ms ease-out;
    -o-transition: margin 200ms ease-out;
    transition: margin 200ms ease-out;
    border-radius: 1.1rem;
}

@media (min-width: 768px) {


    .dark-btn {
        position: absolute; /* ثابت في مكانه ولا يتحرك مع الشاشة */
        top: 5%; /* مثبت في الأعلى */
        left: 50%; /* مثبت في المنتصف أفقياً */
        transform: translateX(-50%); /* لتحريك العنصر إلى المنتصف بالضبط */
        z-index: 9999;  }
    .wrapper .content {
        padding: 30px 0px 30px 30px;
    }
    
    .wrapper .content::before,
    .wrapper .content::after {
        position: fixed;
        content: "";
        width: 100%;
        height: 30px;
        background: #fcf6bd;
        z-index: 1;
    }
    
    .wrapper .content::before {
        top: 0;
    }
    
    .wrapper .content::after {
        bottom: 0;
    }
    
    .wrapper .sidebar {
        position: fixed;
        width: 300px;
        height: 100%;
        margin-left: -250px;
        float: left;
        overflow: auto;
        scrollbar-width: thin;
        scrollbar-color: rgb(26, 25, 25);
        z-index: 2;
    }

    .wrapper .sidebar:hover {
        margin-left: 0px;
    }
    
    .wrapper .content {
        position: relative;
        width: calc(100% - 50px);
        margin-left: 50px;
        float: right;
    }
    
    .wrapper .sidebar:hover  .sidebar-header {
        position: relative;
        display: block;
        width: 100%;
    }

    .wrapper .sidebar    .sidebar-header img {
        width: 100%;
        height: auto;
    }

    .navbar-brand {
        display: none;
    }
    
    .navbar {
        padding: 15px 0;
        flex-direction: column;
    }
    
    .wrapper .sidebar:hover .navbar-expand-md .navbar-nav .nav-link {
        padding: 5px 30px 7px 30px;
    }
    
    .wrapper .sidebar::-webkit-scrollbar {
        width: 7px;
    }

    .wrapper .sidebar::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
    }

    .wrapper .sidebar::-webkit-scrollbar-thumb {
        background-color: rgb(14, 13, 13);
        outline: 1px solid rgb(29, 30, 31);
        border-radius: 7px
    }
    
    .navbar-brand {
        display: none;
    }
    
    .sidebar .sidebar-footer {
        width: 300px;
        position: fixed;
        bottom: 0;
        padding: 15px;
        font-size: 0;
        text-align: center;
        background: #22577a;
    }
    
    .sidebar .sidebar-footer a {
        display: inline-block;
        width: 40px;
        height: 40px;
        padding: 5px 0;
        margin: 0 15px 15px 0;
        text-align: center;
        font-size: 18px;
        color: #0e0d0d;
        background: #f8f2c1;
    }
    
    .sidebar .sidebar-footer a:last-child {
        margin-right: 0;
    }
    
    .sidebar .sidebar-footer a:hover {
        color: #ffffff;
        background: #0F0F0F;
        border: 1.5px solid #fff;
    }
    
    .sidebar:hover .sidebar-footer {
        display: block;
    }
}

@media (min-width: 992px) {
    .dark-btn {
        position: absolute; /* ثابت في مكانه ولا يتحرك مع الشاشة */
        top: 5%; /* مثبت في الأعلى */
        left: 50%; /* مثبت في المنتصف أفقياً */
        transform: translateX(-50%); /* لتحريك العنصر إلى المنتصف بالضبط */
        z-index: 9999;  }
    .wrapper .sidebar {
        margin: 0;
        
    }

    .wrapper .content {
        width: calc(100% - 300px);
        margin-left: 300px;
    }

    .sidebar .sidebar-header {
        position: relative;
        display: block;
        width: 100%;
    }
    
    .navbar-expand-md .navbar-nav .nav-link {
        padding: 5px 30px 7px 30px;
    }
    
    .sidebar .sidebar-footer {
        display: block;
    }
}

@media (max-width: 1140px) {
    .wrapper .content {
        padding: 30px;
    }
    .dark-btn {
        position: absolute; /* ثابت في مكانه ولا يتحرك مع الشاشة */
        top: 5%; /* مثبت في الأعلى */
        left: 50%; /* مثبت في المنتصف أفقياً */
        transform: translateX(-50%); /* لتحريك العنصر إلى المنتصف بالضبط */
        z-index: 9999;  }
}

@media (max-width: 576px) {
    .wrapper .content {
        padding: 15px;
    }
    .dark-btn {
        position: absolute; /* ثابت في مكانه ولا يتحرك مع الشاشة */
        top: 5%; /* مثبت في الأعلى */
        left: 50%; /* مثبت في المنتصف أفقياً */
        transform: translateX(-50%); /* لتحريك العنصر إلى المنتصف بالضبط */
        z-index: 9999;   }
}


/**********************************/
/******** Back to Top CSS *********/
/**********************************/
.back-to-top {
    position: fixed;
    display: none;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 1;
    font-size: 30px;
    right: 30px;
    bottom: 30px;
    transition: background 0.5s;
    z-index: 11;
}

.back-to-top i {
    color: #222222;
}

.back-to-top i:hover {
    color: #f8f2c1;
}

.back-to-top {
    -webkit-animation: action 1s infinite  alternate;
    animation: action 1s infinite  alternate;
}

@-webkit-keyframes action {
    0% { transform: translateY(0); }
    100% { transform: translateY(-15px); }
}

@keyframes action {
    0% { transform: translateY(0); }
    100% { transform: translateY(-15px); }
}


/**********************************/
/*********** Header CSS ***********/
/**********************************/
.header {
    position: relative;
    background: #222222;
    margin-bottom: 15px;
    border-radius: 1.1rem;
}

.header .content-inner {
    padding: 100px 30px;
    background: #22577a;
    background-size: contain;
    border-radius: 18px;
    padding-bottom: 0;
}

.header p {
    color: #f8f2c1;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 10px;
}

.header h1 {
    color: #f8f4f4;
    font-size: 50px;
    font-weight: 700;
}

.header h2 {
    display: inline-block;
    margin: 0;
    height: 25px;
    font-size: 25px;
}

.header .typed-text {
    display: none;
}

.header .typed-cursor {
    font-size: 25px;
    font-weight: 300;
    color: #222222;
}

.large-btn .content-inner {
    font-size: 0;
    border-bottom: 30px solid #f6f1c6;
}

.large-btn .btn {
    position: relative;
    width: 50%;
    padding: 15px 0;
    color: #22577a;
    font-size: 20px;
    background: #222222;
    border-radius: 0;
}

.large-btn .btn:last-child {
    color: #222222;
    background: #22577a;
}

.large-btn .btn i {
    margin-right: 8px;
}

.large-btn .btn::after {
    position: absolute;
    content: "";
    width: 0;
    height: 100%;
    top: 0;
    left: 0;
    transition: all .3s;
}

.large-btn .btn:hover::after {
    width: 100%;
    background: rgba(255, 255, 255, .1);
}


/**********************************/
/******* Content Header CSS *******/
/**********************************/
.content-header {
    position: relative;
    width: 100%;
    margin-bottom: 30px;
    padding-bottom: 10px;
}

.content-header h2 {
    color: #f1f0f0;
    font-size: 35px;
    font-weight: 700;
    letter-spacing: 3px;
    margin: 0;
    

}

.content-header::after {
    content: '';
    position: absolute;
    display: block;
    width: 50px;
    height: 3px;
    bottom: 0;
    left: 0;
    background: #f8f2c1;
}


/**********************************/
/*********** About CSS ************/
/**********************************/
.about {
    position: relative;
    padding: 60px 30px;
    background: #22577a;
    border-bottom: 30px solid #22577a;
    margin-bottom: 15px;
    border-radius: 1.1rem;

}


.about img {
    width: 100%;
    height: auto;
    border-radius: 1rem;
}

@media(max-width: 767.98px) {
    .about img {
        margin-bottom: 15px;
    }
    .dark-btn {
        position: absolute; /* ثابت في مكانه ولا يتحرك مع الشاشة */
        top: 5%; /* مثبت في الأعلى */
        left: 50%; /* مثبت في المنتصف أفقياً */
        transform: translateX(-50%); /* لتحريك العنصر إلى المنتصف بالضبط */
        z-index: 9999;  }
}

.about .btn {
    border-radius: 0;
    color: #22577a;
    background: #f8f2c1;
    transition: all .3s;
}

.about .btn:hover {
    color: #f8f2c1;
    background: #222222;
}

.about .skills {
    padding-top: 15px;
}

.about .skill-name {
    margin-top: 15px;
}

.about .skill-name p {
    display: inline-block;
    margin-bottom: 5px;
    font-size: 16px;
    font-weight: 400;
}

.about .skill-name p:last-child {
    float: right;
}

.about .progress {
    height: 5px;
    border: 1px solid #72c5e6;
    border-radius: 0;
    background: #ffffff;
}

.about .progress .progress-bar {
    width: 1px;
    background: #f8f2c1;
    border-radius: 0;
    transition: 1s;
}


/**********************************/
/********* Education CSS **********/
/**********************************/
.education {
    position: relative;
    padding: 60px 30px;
    background: #22577a;
    border-bottom: 30px solid #22577a;
    margin-bottom: 15px;
    border-radius: 1.1rem;
}

.education .edu-col {
    position: relative;
    width: 100%;
    padding: 20px 0 20px 20px;
    border-left: 1px solid #000814;
    border-bottom: 1px solid #000814;
}

.education .col-md-6:first-child .edu-col {
    padding-top: 0;
}

.education .col-md-6:last-child .edu-col {
    border-bottom: none;
    padding-bottom: 0;
}

@media (min-width: 768px) {
    .dark-btn {
        position: absolute; /* ثابت في مكانه ولا يتحرك مع الشاشة */
        top: 5%; /* مثبت في الأعلى */
        left: 50%; /* مثبت في المنتصف أفقياً */
        transform: translateX(-50%); /* لتحريك العنصر إلى المنتصف بالضبط */
        z-index: 9999; }
    .education .col-md-6:nth-child(-n+2) .edu-col {
        padding-top: 0;
    }

    .education .col-md-6:last-child .edu-col,
    .education .col-md-6:nth-last-child(2) .edu-col {
        border-bottom: none;
        padding-bottom: 0;
    }
}

.education .edu-col span {
    position: relative;
    display: block;
    font-size: 13px;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.education .edu-col span::before {
    position: absolute;
    content: "";
    width: 11px;
    height: 11px;
    background: #000814;
    top: 5px;
    left: -26px;
    border-radius: 5px;
}

.education .edu-col span i {
    color: #f8f2c1;
}

.education .edu-col h3 {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 2px;
}

.education .edu-col p {
    margin: 0;
}


/**********************************/
/********* Experience CSS *********/
/**********************************/
.experience {
    position: relative;
    padding: 60px 30px;
    background: #22577a;
    border-bottom: 30px solid #22577a;
    margin-bottom: 15px;
    border-radius: 1.1rem;
}

.experience .exp-col {
    position: relative;
    width: 100%;
    padding: 20px 0 20px 20px;
    border-left: 1px solid #000814;
    border-bottom: 1px solid #000814;
}

.experience .col-md-6:first-child .exp-col {
    padding-top: 0;
}

.experience .col-md-6:last-child .exp-col {
    border-bottom: none;
    padding-bottom: 0;
}

@media (min-width: 768px) {
    .dark-btn {
        position: absolute; /* ثابت في مكانه ولا يتحرك مع الشاشة */
        top: 5%; /* مثبت في الأعلى */
        left: 50%; /* مثبت في المنتصف أفقياً */
        transform: translateX(-50%); /* لتحريك العنصر إلى المنتصف بالضبط */
        z-index: 9999;
      }
    .experience .col-md-6:nth-child(-n+2) .exp-col {
        padding-top: 0;
    }

    .experience .col-md-6:last-child .exp-col,
    .experience .col-md-6:nth-last-child(2) .exp-col {
        border-bottom: none;
        padding-bottom: 0;
    }
}

.experience .exp-col span {
    position: relative;
    display: block;
    font-size: 13px;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.experience .exp-col span::before {
    position: absolute;
    content: "";
    width: 11px;
    height: 11px;
    background: #000814;
    top: 5px;
    left: -26px;
    border-radius: 5px;
}

.experience .exp-col span i {
    color: #f8f2c1;
}

.experience .exp-col h3 {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 5px;
}

.experience .exp-col h4 {
    font-size: 14px;
    font-weight: 400;
    font-style: italic;
    margin-bottom: 5px;
}

.experience .exp-col h5 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
}

.experience .exp-col p {
    margin: 0;
}


/**********************************/
/*********** Service CSS **********/
/**********************************/
.service {
    position: relative;
    padding: 60px 30px 30px 30px;
    background: #22577a;
    border-bottom: 30px solid #22577a;
    margin-bottom: 15px;
    border-radius: 1.1rem;
}

.service .srv-col {
    position: relative;
    width: 100%;
    margin-bottom: 30px;
}

.service .srv-col i {
    font-size: 30px;
    color: #000814;
    margin-bottom: 15px;
}

.service .srv-col h3 {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 5px;
}

.experience .exp-col h4 {
    font-size: 14px;
    font-weight: 400;
    font-style: italic;
    margin-bottom: 5px;
}

.experience .exp-col h5 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
}

.experience .exp-col p {
    margin: 0;
}


/**********************************/
/********** Portfolio CSS *********/
/**********************************/
.portfolio {
    position: relative;
    padding: 60px 30px 30px 30px;
    background: #22577a;
    border-bottom: 30px solid #22577a;
    margin-bottom: 15px;
    border-radius: 1.1rem;
}

.portfolio #portfolio-flters {
    padding: 0;
    margin: -15px 0 30px 0;
    list-style: none;
    font-size: 0;
}

.portfolio #portfolio-flters li {
    cursor: pointer;
    margin: 15px -1px 0 0;
    display: inline-block;
    height: 35px;
    padding: 10px;
    color: #fcf6bd;
    font-size: 13px;
    line-height: 15px;
    text-transform: uppercase;
    border: 1px solid #f8f2c1;
    background: #222222;
    transition: all 0.3s ease-in-out;
}

.portfolio #portfolio-flters li:hover,
.portfolio #portfolio-flters li.filter-active {
    background: #f8f2c1;
    color: #222222;
}

.portfolio .portfolio-item {
    position: relative;
    height: 250px;
    overflow: hidden;
}

.portfolio .portfolio-item figure {
    background: #222222;
    overflow: hidden;
    height: 220px;
    position: relative;
    border-radius: 0;
    margin: 0; 
}

.portfolio .portfolio-item figure img {
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

.portfolio .portfolio-item figure:hover img {
    opacity: 0.3;
    transition: 0.3s;
}

.portfolio .portfolio-item figure .link-preview,
.portfolio .portfolio-item figure .link-details,
.portfolio .portfolio-item figure .portfolio-title {
    position: absolute;
    display: inline-block;
    opacity: 0;
    line-height: 1;
    text-align: center;
    width: 45px;
    height: 35px;
    background: #f8f2c1;
    transition: 0.2s linear;
}

.portfolio .portfolio-item figure .link-preview i,
.portfolio .portfolio-item figure .link-details i {
    color: #222222;
    padding-top: 10px;
    font-size: 16px;
}

.portfolio .portfolio-item figure .link-preview:hover,
.portfolio .portfolio-item figure .link-details:hover {
    background: #222222;
}

.portfolio .portfolio-item figure .link-preview:hover i,
.portfolio .portfolio-item figure .link-details:hover i {
    color: #f8f2c1;
}

.portfolio .portfolio-item figure .link-preview {
    left: 50%;
    top: calc(25% - 18px);
}

.portfolio .portfolio-item figure .link-details {
    right: 50%;
    top: calc(25% - 18px);
}

.portfolio .portfolio-item figure .portfolio-title {
    margin: 0;
    width: 100%;
    height: 50%;
    left: 0;
    right: 0;
    top: 100%;
    padding: 30px 10px;
    color: #222222;
    font-size: 16px;
    font-weight: 600;
    background: rgba(255, 111, 97, .5);
    border-radius: 0;
}

.portfolio .portfolio-item figure .portfolio-title:hover {
    text-decoration: none;
}

.portfolio .portfolio-item figure .portfolio-title span {
    display: block;
    margin-top: 10px;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    font-weight: 300;
}

.portfolio .portfolio-item figure:hover .link-preview {
    opacity: 1;
    left: calc(50% - 61px);
}

.portfolio .portfolio-item figure:hover .link-details {
    opacity: 1;
    right: calc(50% - 61px);
}

.portfolio .portfolio-item figure:hover .portfolio-title {
    opacity: 1;
    top: 50%;
}


/**********************************/
/*********** Review CSS ***********/
/**********************************/
.review {
    position: relative;
    background: #22577a;
    border-bottom: 30px solid #22577a;
    margin-bottom: 15px;
    border-radius: 1.1rem;
}

.review .content-inner {
    position: relative;
    padding: 60px 30px;
    background: url(../img/quote.png) right bottom no-repeat;
}

.review .review-text p {
    font-size: 18px;
    font-style: italic;
}

.review .review-img {
    display: flex;
    align-items: center;
}

.review .review-img img {
    width: 80px; 
    height: 80px; 
    object-fit: cover;
    margin-right: 15px;
    vertical-align: middle;
}

.review .review-name h3 {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 5px;
}

.review .review-name p {
    font-size: 14px;
    margin-bottom: 0;
}

.review .review-text .ratting {
    margin-bottom: 5px;
}

.review .review-text .ratting i {
    color: #f8f2c1;
    font-size: 14px;
}

.review .slick-slider:hover .slick-prev {
    left: 30px;
}

.review .slick-slider:hover .slick-next {
    right: 30px;
}

.review-slider .slick-prev,
.review-slider .slick-next {
    width: 35px;
    height: 35px;
    z-index: 1;
    opacity: 0;
    transition: .5s;
    background: rgba(255, 111, 97, .7);
}

.review-slider .slick-prev {
    left: 55px;
}

.review-slider .slick-next {
    right: 55px;
}

.review-slider.slick-slider:hover .slick-prev {
    left: 15px;
    opacity: 1;
}

.review-slider.slick-slider:hover .slick-next {
    right: 15px;
    opacity: 1;
}

.review-slider .slick-prev:hover,
.review-slider .slick-prev:focus,
.review-slider .slick-next:hover,
.review-slider .slick-next:focus {
    background: rgba(0, 0, 0, .7);
}

.review-slider .slick-prev:hover::before,
.review-slider .slick-prev:focus::before,
.review-slider .slick-next:hover::before,
.review-slider .slick-next:focus::before {
    color: #f8f2c1;
}

.review-slider .slick-prev::before,
.review-slider .slick-next::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 18px;
    color: #222222;
}

.review-slider .slick-prev::before {
    content: "\f104";
}

.review-slider .slick-next::before {
    content: "\f105";
}

.review-slider .slick-dots {
    bottom: 15px;
}

.review-slider .slick-dots li button:before {
    color: #222222;
    font-size: 15px;
}

.review-slider .slick-dots li.slick-active button:before {
    color: #f8f2c1;
}

.review-slider.slick-slider {
    margin-bottom: 0;
}


/**********************************/
/*********** Contact CSS ***********/
/**********************************/
.contact {
    position: relative;
    padding: 60px 30px 30px 30px;
    background: #22577a;
    border-radius: 1.1rem;
}

.contact .contact-info {
    position: relative;
    width: 100%;
    margin-bottom: 30px;
}

.contact .contact-info p {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.contact .contact-info p i {
    width: 25px;
    color: #f8f2c1;
}

.contact .contact-info p a {
    color: #fcf6bd;
}

.contact .contact-info p a:hover {
    color: #f8f2c1;
    text-decoration: none;
}

.contact .social {
    font-size: 0;
}

.contact .social a {
    width: 35px;
    height: 35px;
    padding: 5px 0;
    color: #222222;
    background: #f8f2c1;
    border-radius: 0;
    margin-top: 15px;
    margin-right: 15px;
    transition: all .3s;
}

.contact .social a:last-child {
    margin-right: 0;
}

.contact .social a:hover {
    color: #f8f2c1;
    background: #222222;
    border: 1.5px solid #fff;
}

.contact .form {
    position: relative;
    width: 100%;
    margin-bottom: 30px;
}

.contact .form .form-control {
    border-radius: 0;
}

.contact .form .form-control:focus {
    box-shadow: none;
    border-color: #f8f2c1;
}

.contact .form .btn {
    color: #222222;
    background: #f8f2c1;
    border-radius: 0;
    transition: all .3s;
}

.contact .form .btn:hover {
    color: #f8f2c1;
    background: #222222;
    
    
}


/**********************************/
/*********** Footer CSS ***********/
/**********************************/
.footer {
    position: relative;
    width: 100%;
    padding: 30px 30px 0 30px;
    background: #fcf6bd;
    border-radius: 1.1rem;
}

.footer .col-md-6:last-child {
    text-align: right;
}

@media(max-width: 767.98px) {
    .dark-btn {
        position: absolute; /* ثابت في مكانه ولا يتحرك مع الشاشة */
  top: 5%; /* مثبت في الأعلى */
  left: 50%; /* مثبت في المنتصف أفقياً */
  transform: translateX(-50%); /* لتحريك العنصر إلى المنتصف بالضبط */
  z-index: 9999;
      }
    .footer .col-md-6,
    .footer .col-md-6:last-child{
        text-align: center;
    }
}

.footer p {
    color: #22577a;
    margin: 0;
}

.footer a {
    color: #000000;
    font-weight: 600;
}

.footer a:hover {
    color: #29a7e1;
}




.Paragraf{
    color: #cad7cc;
}
.imgprofil{
   
    height: 300px;
}
.display-element {
    font-size: 35px;
    color: #f8f4f4;
}

 /* dark mode btn */
 #checkbox {
    display: none;
  }
  
  .switch {
    position: relative;
    width: 50px;
    height: 50px;
    background-color: rgb(96, 187, 235);
    border-radius: 50%;
    z-index: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgb(77, 204, 255);
    box-shadow: 0px 0px 3px rgb(2, 2, 2) inset;
  }
  .switch svg {
    width: 1.2em;
  }
  .switch svg path {
    fill: rgb(48, 48, 48);
  }
  #checkbox:checked + .switch {
    box-shadow: 0px 0px 1px rgb(151, 243, 255) inset,
      0px 0px 2px rgb(151, 243, 255) inset, 0px 0px 10px rgb(151, 243, 255) inset,
      0px 0px 40px rgb(151, 243, 255), 0px 0px 100px rgb(151, 243, 255),
      0px 0px 5px rgb(151, 243, 255);
    border: 2px solid rgb(255, 255, 255);
    background-color: rgb(146, 180, 184);
  }
  #checkbox:checked + .switch svg {
    filter: drop-shadow(0px 0px 5px rgb(128, 237, 252));
  }
  #checkbox:checked + .switch svg path {
    fill: rgb(255, 255, 255);
  }
  .dark-btn {
   width: 0;
    position: absolute; /* مطلق داخل الحاوية */
    top: 50px; /* تعديل هذه القيمة لجعل العنصر ينزل قليلاً من الأعلى */
    right: 0; /* لضمان أن العنصر في أقصى اليمين */
    z-index: 9999; /* تعيين قيمة عالية لـ z-index لجعل العنصر يظهر فوق العناصر الأخرى */
  transform: translateX(0); /* لا حاجة لترجمة المحور X */
  }
  .dark-mode {
    color: #0F0F0F;
    background: #0F0F0F;
  }
  .dark-mode .content {
    color: #0F0F0F;
    background: #0F0F0F;
  }

  .dark-mode .about {
    background: #005B41;
    border-bottom: 30px solid #005B41;
  }
  .dark-mode .education {
    background: #005B41;
    border-bottom: 30px solid #005B41;
  }
  .dark-mode .experience {
    background: #005B41;
    border-bottom: 30px solid #005B41;
  }
  .dark-mode .service {
    background: #005B41;
    border-bottom: 30px solid #005B41;
  }
  .dark-mode .portfolio {
    background: #005B41;
    border-bottom: 30px solid #005B41;
  }
  .dark-mode .contact {
    background: #005B41;
    border-bottom: 30px solid #005B41;
  }
  .dark-mode .header .content-inner {
    background: #005B41;
    border-bottom: 30px solid #005B41;
  }
  .dark-mode .navbar{
    background: #005B41 !important;
    
  }  
  .dark-mode .sidebar-footer{
    background: #005B41 ;
    
  }  
 .dark-mode .navbar-expand-md .navbar-nav .nav-link:hover,
.dark-mode .navbar-expand-md .navbar-nav .nav-link.active {
    color: #52b788;
    box-shadow: 0 0 20px #28eb79  ;
    
}

 .dark-mode .navbar-expand-md .navbar-nav .nav-link:hover i,
.dark-mode .navbar-expand-md .navbar-nav .nav-link.active i{
    color: #52b788;

}
.dark-mode   .wrapper .content::before {
    background-color: #0F0F0F;
}
.dark-mode .large-btn .content-inner {
    
    border-bottom: 30px solid #0F0F0F;
}
.dark-mode .large-btn .btn {
    color: #005B41;
}
.dark-mode .large-btn .btn:last-child {
    color: #000814;
    background-color: #005B41;
}
.dark-mode .wrapper .content::after  {
    background: #0F0F0F;
}
 .dark-mode .footer {
    background-color: #0F0F0F;
 }

 .dark-mode .footer p {
    color: #005B41;
    margin: 0;
}

.dark-mode .footer a {
    color: #1e7846;
    font-weight: 600;
}

.dark-mode .footer a:hover {
    color: #0fe3a7;
}
.dark-mode .wrapper .sidebar {
    margin: 0;
    background-color: #005B41;
} 

/* 70% 90% 80% */

  /* القلوب */
  .hert  { 

    
    font-size:25px ;
    animation: fall 3s;
    animation-fill-mode: forwards;
    position: fixed; 
    top: 0;
    position: absolute; 
   
    left: 0; 
    z-index: 1000;
   
}
@keyframes fall {
    0% {transform: translateY(-5vh);}

    100% { transform: translateY(120vh);}
    
}




  /* icocn html css */
  .icons{
    width: 50px;
    height: 50px;


  }
  /* container icons */
  .conicons{
   padding-bottom: 15px;
   margin: 0 20px;

  }







  /* Style the sidebar */
/* القواعد الأساسية للقائمة الجانبية */
.sidebarsm {
height: 100%;
width: 0;
position: fixed;
z-index: 9999;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
border-radius: 0 12px 12px 0;

}

/* الأنماط للروابط في القائمة الجانبية */
.sidebarsm .nav-link {
padding: 8px ;
text-decoration: none;
font-size: 25px;
color: #f5f4f4;
display: block;
transition: 0.3s;
border-radius: 10px;
border: 1px solid white;
border-right: black;
border-left: black;
margin-top: 12px;
}

/* تغيير لون الروابط عند التمرير فوقها */
.sidebarsm .nav-link:hover {
color: #7c8d8d;

}

/* الأنماط لأيقونة الإغلاق */
.sidebarsm .closebtn {
position: absolute;
color: #ffffff;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}

/* الأنماط للعنصر النشط */
.sidebarsm .nav-item.active .nav-link {
color: #f1f1f1;
background-color: #575757;
}

/* عندما تكون القائمة الجانبية مفتوحة */
.sidebarsm.open {
width: 250px;
}

/* أنماط navbar-collapse لتحسين الترتيب */
.navbar-collapse {
display: flex;
flex-direction: column;
height: 95%;
}

/* استخدام Font Awesome لأيقونات مخصصة */
.fa {

float: right;
}
.social-nav {
    background-color: wheat;
    text-align: center;
    font-size: 35px;
}
.social-nav a {
    border: 2px solid black;

}
.sidebarsm {
    display: none;
}

@media (max-width: 767px) {
    .sidebarsm {
        display: block;
    }
}